'use client';
import { useEffect, useState } from "react";
import AnyMask from "./anymask";
import styles from "./RightMask.module.css";

// 1. 定义面具类型接口，明确包含的属性
interface Mask {
  id: string;     // 必须包含 id 属性
  name: string;   // 必须包含 name 属性
}

export default function RightMask() {
  // 2. 用接口约束 masks 状态的类型
  const [masks, setMasks] = useState<Mask[]>([]);
  useEffect(() => {
    fetch("http://localhost:8080/mask/all").then((res) => {
      return res.json();
    }).then((masks) => {
      setMasks(masks)
      console.log(masks);
    })
      .catch((err) => {
        console.log(err);
      })
  }, [])
const masklist=masks.map((mask: Mask) => ( // 4. 约束循环变量的类型
            <AnyMask
              key={mask.id} 
              maskid={mask.id}
              maskName={mask.name}
            />
          ))
  return (
    <div className={styles.rightMask}>
      <div className={styles.maskTop}>请选择你需要的面具</div>
      <div className={styles.maskSelect}>
        <ul>
          {masklist}
        </ul>
      </div>
    </div>
  );
}
    